"use client";
import { useEffect, useState } from "react";
import { useTheme } from "next-themes";

export default function SwitchTheme() {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <div
      className="cursor-pointer"
      onClick={() =>
        setTheme(theme === "dark-classic" ? "light" : "dark-classic")
      }
    >
      {theme === "light" ? <span>🌙</span> : <span>🌞</span>}
    </div>
  );
}
